<template>
  <!-- 组织架构 -->
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card" v-loading="loading">
        <!-- 用了一个行列布局 -->

        <tree-tools :data="company" @add_edit="handleAddedit" />
        <!-- 放置一个el-tree组件 -->
        <el-tree
          :data="DepartmentList"
          :props="{ label: 'name' }"
          :default-expand-all="true"
        >
          <!-- 
            作用域插槽获取每行部门对象，
          让组件的结构支持自定义data就是每行的部门对象 
          -->
          <!-- 用了一个行列布局 -->
          <template #default="{ data }">
            <tree-tools
              :data="data"
              @add_edit="handleAddedit"
              @del="delDepartments"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <add-dept
      :isShow.sync="isShows"
      :nodeData="nodeData"
      :deptList="add_dept"
      @Re-render="handleRendering"
    />
  </div>
</template>

<script>
// 项目着重关注的几个点:
// 1.路由守卫(为什么获取用户信息要在前置守卫中发请)
// 2.登录token拦截
// 3.token过期处理
// 4.路由拆模块(动静路由表如何划分和配合工作)
// 5.数组如何转树？
import { getDepartmentApi, deleteDepartmentApi } from "@/api/departments";
import TreeTools from "./components/tree_tools.vue";
import AddDept from "./components/add_dept.vue";
// 列表转树函数
import { list2Tree } from "@/utils/shift";
export default {
  name: "ViewsDepartments",
  components: {
    TreeTools,
    AddDept,
  },
  data() {
    return {
      // 部门树形数据
      DepartmentList: [],
      // 公司信息
      company: {},
      isShows: false,
      // 添加部门
      nodeData: {},
      // 规则校验
      add_dept: [],
      // 加载效果
      loading: false,
    };
  },
  created() {
    this.getDepartment();
  },
  methods: {
    // 获取部门列表
    async getDepartment() {
      this.loading = true;
      const resp = await getDepartmentApi();
      const { data } = resp;
      // 保存一份列表数据
      this.add_dept = data.depts;
      // 公司信息
      this.company = {
        name: data.companyName,
        pid: data.companyId,
        manager: data.companyManager,
      };
      // 部门树形数据
      this.DepartmentList = list2Tree(data.depts, "");
      this.loading = false;
    },
    // 删除部门
    async delDepartments(id) {
      try {
        await this.$confirm("此操作将永久删除该部门, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await deleteDepartmentApi(id);
        // 删除成功后重新渲染
        this.getDepartment();
        this.$message.success("删除成功");
      } catch (error) {}
    },
    // 开启弹层
    handleAddedit(data) {
      this.isShows = true;
      this.nodeData = data;
    },
    // 重新渲染
    handleRendering() {
      this.getDepartment();
    },
    // 修改部门信息
  },
};
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 40px 110px;
  font-size: 14px;
}

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>